<template>
  <div class="c-tab">
    <div class="tabs">
      <div :class="['tab',curSelect===item.key?'selected':'']"
           v-for="item in tabList" :key="item.key" @click="selectChange(item)">{{ item.name }}
      </div>
    </div>
    <div class="content">
      <div class="scroll" :style="contentStyle">
        <slot/>
      </div>
    </div>
  </div>
</template>

<script lang="js">
export default {
  name: "cTab",
  props: {
    selectKey: {
      type: String,
      default: () => []
    },
    tabList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      curSelect: "",
      curSelectIndex: 0
    }
  },
  computed: {
    contentStyle() {
      this.curSelectIndex = this.tabList.findIndex(item => item.key === this.curSelect)
      return {transform: `translateX(${-this.curSelectIndex * 100}%)`}
    }
  },
  created() {
    this.curSelect = this.selectKey;
  },
  methods: {
    selectChange(e) {
      this.curSelect = e.key;
      this.$emit('update:selectKey', this.curSelect);
    }
  }
}
</script>

<style scoped lang="stylus">
.c-tab {
  margin-bottom 20px

  .tabs {
    display flex
    align-items center

    .tab {
      cursor pointer
      border-top-left-radius 16px
      border-top-right-radius 16px
      text-align center
      width 180px
      height 55px
      line-height 55px
      box-shadow: 0 0 8px 0 rgba(14, 27, 110, 0.15), 0 0 4px 0 rgba(14, 24, 101, 0.20);
      position relative
      z-index 1
      background-color #E2E6EE
      color: #484D78;
      font-weight bold

      &:after {
        content: "";
        display: block;
        position: absolute;
        height: 4px;
        width: 100%;
        background-color: #fff;
        bottom: -4px;
        left: 0;
        z-index: 9;
      }
    }

    .selected {
      z-index: 2;
      color: #4B82FB;
      background-color: #FFFFFF;
    }
  }

  .content {
    box-shadow: 0 4px 8px 0 rgba(14, 27, 110, 0.15), 0 2px 4px 0 rgba(14, 24, 101, 0.20);
    border-bottom-left-radius 16px
    border-bottom-right-radius 16px
    overflow hidden

    .scroll {
      transition all 0.5s
      display flex
    }
  }
}

</style>
